<template>
  <div class="main-div">
    <Row>
      <Col span="24">
        <bus-obj
          :single-show.sync="busShow"
          :on-ok="confirmDialogSingleEvent"
          :existData="mainTable"
        ></bus-obj>
        <Card>
          <p slot="title">新增表单</p>
          <Form
            ref="formInline"
            :model="formInline"
            :label-width="80"
            :rules="ruleValidate"
          >
            <FormItem prop="groupName" label="表单分类">
              <treeselect
                v-model="formInline.groupName"
                class="input_w"
                :normalizer="normalizer"
                :multiple="false"
                @select="selectTree"
                @input="clearOnSelect"
                placeholder="请选择"
                :options="categoryData"
              />
            </FormItem>

            <FormItem prop="name" label="表单名称">
              <Input v-model="formInline.name" type="text" class="input_w" />
            </FormItem>

            <FormItem prop="formKey" label="别名">
              <Input v-model="formInline.formKey" type="text" class="input_w" />
            </FormItem>
            <FormItem prop="formBusinessId" label="业务对象">
              <el-tag type="success" v-if="mainTable">
                {{ mainTable.objName }}
              </el-tag>
              <Button
                type="primary"
                style="margin-bottom: 2px; margin-right: 15px"
                @click="addBus"
                >选择
              </Button>
            </FormItem>
            <FormItem prop="formType" label="类型">
              <Select v-model="formInline.formType" class="input_w">
                <Option
                  v-for="item in formTypeList"
                  :key="item.value"
                  :value="item.value"
                  >{{ item.label }}</Option
                >
              </Select>
            </FormItem>
            <FormItem prop="objDesc" label="描述">
              <Input
                v-model="formInline.objDesc"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 8 }"
                class="input_w"
              />
            </FormItem>
          </Form>
          <el-button type="primary" @click="add" :loading="loading"
            >下一步</el-button
          >
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import busObj from "@/views/common/busObj";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import { getTypesByKey, designSave } from "@/api/form";

export default {
  name: "formDesign",
  components: {
    busObj,
    Treeselect,
  },

  data() {
    return {
      mainTable: null,
      loading: false,
      categoryData: [],
      modelerSrc: "",
      busShow: false,
      baseURL: process.env.VUE_APP_BASE_BPM_API,
      ruleValidate: {
        groupName: [
          { required: true, message: "请选择分类", trigger: "change" },
        ],
        name: [{ required: true, message: "请输入表单名称", trigger: "blur" }],
        formKey: [{ required: true, message: "请输入别名", trigger: "blur" }],
        formType: [{ required: true, message: "请输入类型", trigger: "blur" }],
        formBusinessId: [
          { required: true, message: "请选择业务对象", trigger: "change" },
        ],
      },

      formInline: {
        name: "",
        code: "",
        description: "",
        mainTable: "",
        formBusinessId: "",
        groupName: null,
        groupId: "",
        formType: "pc",
        id: "",
      },
      formTypeList: [
        { label: "PC表单", value: "pc" },
        { label: "手机表单", value: "mobile" },
      ],
    };
  },
  mount() {
    this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop;
  },
  created() {
    this.getData();
  },
  methods: {
    //后台返回的数据如果和VueTreeselect要求的数据结构不同，需要进行转换
    normalizer(node) {
      //去掉children=[]的children属性
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.title,
        label: node.title,
        children: node.children,
      };
    },
    selectTree: function (node, instanceId) {
      this.formInline.groupId = node.id;
      this.formInline.groupName = node.title;
      this.validateFormInline();
    },
    validateFormInline: function () {
      this.$nextTick(() => {
        this.$refs["formInline"].validate((valid) => {});
      });
    },
    clearOnSelect: function (node, instanceId) {
      if (!node) {
        this.formInline.groupId = "";
        this.formInline.groupName = null;
        this.validateFormInline();
      }
    },
    confirmDialogSingleEvent: function (data) {
      if (data) {
        this.mainTable = data;
        this.formInline.mainTable = data.tableName;
        this.formInline.formBusinessId = data.id;
        this.validateFormInline();
      }
    },
    addBus: function () {
      this.busShow = true;
    },
    add: function () {
      try {
        this.$refs["formInline"].validate((valid) => {
          if (valid) {
            var that = this;
            that.loading = true;
            designSave(this.formInline).then((response) => {
              var code = response.code;
              if (code == 0) {
                //formModeler
                that.loading = false;

                this.$router.push({
                  name: "formModeler",
                  query: { t: new Date().getTime(), id: response.id },
                });
              } else {
                that.loading = false;
                this.$message({
                  duration: 800,
                  message: response.msg,
                  type: "warning",
                  customClass: "zZindex",
                });
              }
            });
          }
        });
      } finally {
        this.loading = false;
      }
    },
    queryFormCreateTime: function (e) {
      this.queryForm.createTime = e;
    },
    refreshTask: function (data) {
      if (data[0].parentId == "-1") {
        this.queryForm.groupId = "";
      } else {
        this.queryForm.groupId = data[0].id;
      }
      this.queryForm.page = 1;

      this.getData();
    },
    queryMethod: function () {
      var name = this.queryForm.name;
      var whereSql = "";
      var createTime = this.queryForm.createTime;
      if (createTime) {
        if (createTime[0]) {
          whereSql =
            "  CREATE_TIME_  between '" +
            createTime[0] +
            "' and " +
            "'" +
            createTime[1] +
            "'";
        }
      }
      this.queryForm.whereSql = whereSql;
      getTaskData(this.queryForm).then((response) => {
        this.tableData = response.data;
        this.total = response.count;
      });
    },
    getTypesByKeyAction: function () {
      getTypesByKey().then((response) => {
        this.categoryData = response.data;
      });
    },
    initData: function () {
      this.getTypesByKeyAction();
      this.getData();
    },
    getData: function () {
      getTypesByKey().then((response) => {
        this.categoryData = response.data;
      });
    },
    handleCurrentChange(val) {
      this.queryForm.page = val;
      this.getData();
    },
    handleClick(data) {
      this.$router.push({
        name: "businessTableInnerAdd",
        query: {
          t: new Date().getTime(),
          id: data.id,
          operate: data.type,
          edit: true,
        },
      });
    },
    handleDelClick(data) {
      businessTableDel(data.id).then((response) => {
        if (response.code == 0) {
          this.$message({
            duration: 800,
            message: "操作成功",
            type: "success",
            customClass: "zZindex",
          });

          this.getData();
        } else {
          this.$message({
            duration: 800,
            message: "操作成功",
            type: "success",
            customClass: "zZindex",
          });
        }
      });
    },
    search() {
      this.queryForm.page = 1;
      this.queryMethod();
    },
    reset() {
      this.queryForm.name = "";
      this.queryForm.createTime = "";
      this.queryForm.whereSql = "";
      this.queryDate = [];
      this.getData();
    },
  },
};
</script>
<style lang="scss">
.task-card {
  margin-top: 10px;
}
.input_w {
  width: 30% !important;
}
</style>
